import React, {useState} from 'react';
import {Menu, Layout, Space, MenuProps} from "antd";
import {DatabaseOutlined, HomeOutlined} from "@ant-design/icons";
import {useNavigate} from "react-router-dom";
type MenuItem = Required<MenuProps>['items'][number];
function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem {
    return {
        key,
        icon,
        children,
        label,
    } as MenuItem;
}

const items: MenuItem[] = [
    getItem('主页', '/', <HomeOutlined />),
    getItem('商品管理', 'sub1', <DatabaseOutlined />, [
        getItem('品牌管理', '/cmn/dict'),
        getItem('属性管理', '/cmn/attribute')
    ])
];

function IndexSider() {
    const [collapsed, setCollapsed] = useState<boolean>(false);
    const navigate = useNavigate();
    return (
        <Layout.Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
            <div className="logo">
                <Space>
                    <img src={require("@/assets/img/logo.png")} alt=""/>
                    <span style={{display:collapsed?"none":"inline-block"}}>尚医通管理系统</span>
                </Space>
            </div>
            <Menu onClick={({key,keyPath})=>{
                // console.log(key,keyPath)
                navigate(key);
            }} theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
        </Layout.Sider>
    );
}
export default IndexSider;